<!-- 自定义TimelineItem组件 -->
<script setup>
import { ref, computed, watch, inject } from 'vue'
import { formatCls, isTrue, addUnit, Int } from './util.js'
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  // 时间戳
  timestamp: {
    type: String,
    default: '',
  },
  // 隐藏时间戳
  hideTimestamp: {
    type: [Boolean, String],
    default: false,
  },
  // 时间戳位置(top / bottom)
  placement: {
    type: String,
    default: 'bottom',
  },
  // 节点颜色
  color: String,
  // 节点图标
  icon: [String, Number],
  // 节点尺寸
  size: {
    type: [Number, String],
    default: '15rpx',
  },
  // 分割线类型(solid / dashed / dotted)
  lineType: {
    type: String,
    default: 'solid',
  },
  // 分割线颜色
  lineColor: String,
  // 数据
  dataList: {
    type: Object,
    default: () => null,
  },
})
const emit = defineEmits(['click'])
const preClass = formatCls(props, 've__timeline-item--', ['type'])
const lineStyle = computed(() => {
  return `
			border-right-style: ${props.lineType};
			border-right-color: ${props.lineColor};
		`
})
const nodeStyle = computed(() => {
  return `
			background: ${props.color};
		`
})

// 事件
const handleClick = (e) => {
  emit('click', e)
}
// 跳详情
const gotoDetail = (id) => {
  // 跳转到详情页
  // uni.navigateTo({ url: '/pagesOrder/create/create' })
  emit('gotoDetail', id)
}
const jumpAttraction = (data) => {
  uni.navigateTo({
    url: `${
      data.eventType == '2' ? '/pagesTrip/hotel/hotel' : '/pagesTrip/attraction/attraction'
    }?id=${data.eventId}&type=${data.eventType}`,
  })
}
</script>

<template>
  <li class="ve__timeline-item" :class="[preClass]">
    <!-- 时间线 -->
    <div
      class="ve__timeline-item__line"
      :style="{
        '--size': `${props.size}`,
        'border-right-style': `${props.lineType}`,
        'border-right-color': `${props.lineColor}`,
      }"
    ></div>
    <!-- 时间线节点 -->
    <div v-if="!icon" class="ve__timeline-item__node" :style="nodeStyle"></div>
    <!-- 自定义时间线圆点dot -->
    <div
      v-else
      class="ve__timeline-item__node-custom"
      :class="icon == 1 ? 'icon1' : icon == 2 ? 'icon2' : icon == 3 ? 'icon3' : 'icon4'"
      :style="nodeStyle"
    ></div>
    <!-- 内容区 -->
    <div
      class="ve__timeline-item__body"
      :class="{
        've__timeline-item__body_card': dataList.type === 'card',
        luxian_bg: dataList.zhuanyi || dataList.transport,
      }"
      @click="!dataList.zhuanyi && dataList.type === 'card' && jumpAttraction(dataList)"
      :style="{ top: dataList.type !== 'card' ? addUnit(Int(size) / 2 - 9) : 0 }"
    >
      <template v-if="dataList.type !== 'card'">
        <div class="ve__timeline-item__body_left">
          <div class="ve__timeline-item__body_left_time">
            {{ 'DAY' + dataList.days + ' · ' + dataList.destination }}
          </div>
          <div class="ve__timeline-item__body_left_active">
            {{ dataList.title }}
          </div>
          <div class="ve__timeline-item__body_left_path ellipsis">
            {{ dataList.path }}
          </div>
        </div>
        <div @click="gotoDetail(dataList.id)" v-if="!icon" class="ve__timeline-item__body_right">
          Detail
        </div>
      </template>
      <!-- jingdian: {
      placeName: 'Taiping Street',
      suggest: 'Suggest playing for 2 hour',
      icon: ['Downtown Area'],
      introduce: 'One of the frequent destinations for tourists from other places',
    }, -->
      <!-- eventType 1景点 2酒店 -->
      <template v-if="dataList.type === 'card'">
        <div v-if="dataList.eventType == '1'" style="width: 100%">
          <div class="item-blod marginB_6" style="word-wrap: break-word">
            {{ dataList.eventName }}
          </div>
          <div class="item-suggest marginB_14">
            Suggest playing for {{ dataList.playDuration }} hour
          </div>
          <div
            class="marginB_21"
            style="display: flex"
            v-if="dataList.label && dataList.label.length"
          >
            <div class="item-icon" v-for="(item, index) in dataList.label" :key="index">
              {{ item }}
            </div>
          </div>
          <div class="item-introduce marginB_14">
            {{ dataList.introduce }}
          </div>
          <div class="item-image">
            <!-- <div class="item-card-image" v-for="(item, index) in dataList.imageUrl" :key="index"> -->
            <image
              mode="scaleToFill"
              class="item-card-image"
              v-for="(item, index) in dataList.imageUrl"
              :key="index"
              :src="item"
            >
            </image>
            <!-- </div> -->
          </div>
        </div>
        <div v-if="dataList.zhuanyi" class="zhuanyi">
          <div class="marginB_10">
            <text class="marginR_18 font_34">Go to</text>
            <!-- item-blod-b -->
            <text class="item-blod-b marginB_6">{{ dataList.zhuanyi.destination }}</text>
          </div>
          <!-- <div class="item-suggest">
            {{ dataList.zhuanyi.distance }}
          </div> -->
        </div>
        <!-- <div v-if="dataList.transport" class="transport">
          <div class="item-blod marginB_20">
            {{ dataList.transport.behavior }}
          </div>
          <div class="item-suggest">
            {{ dataList.transport.cause }}
          </div>
        </div> -->
        <div v-if="dataList.eventType == '2'" class="jiudian width100">
          <div class="item-blod marginB_6">Accommodation</div>
          <div class="jiudian_content">
            <div class="jiudian_content_image" @click="jumpAttraction(dataList)">
              <image class="item-jiudian-image" mode="scaleToFill" :src="dataList.imageUrl[0]">
              </image>
            </div>
            <div class="jiudian_content_image_info" style="overflow: hidden">
              <div class="item-blod-m marginB_12">
                {{ dataList.eventName }}
              </div>
              <div class="marginB_10" style="display: flex">
                <div class="item-icon" v-for="(item, index) in dataList.label" :key="index">
                  {{ item }}
                </div>
              </div>
              <div class="jiudian_location">
                <image
                  v-if="dataList.location"
                  class="jiudian_weizhi"
                  mode="scaleToFill"
                  src="/static/images/detail/weizhi@2x.png"
                >
                </image>
                <text class="item-location">{{ dataList.location || '' }}</text>
              </div>
            </div>
          </div>
        </div>
        <!-- active: {
      behavior: 'Activity',
      content: [
        {
          image: 'xxx',
          name: 'Wangfujing 19th Active',
          time: 'January 28th, 13:00',
        },
        {
          image: 'xxx',
          name: 'Wangfujing 19th Active',
          time: 'January 28th, 13:00',
        },
        {
          image: 'xxx',
          name: 'Wangfujing 19th Active',
          time: 'January 28th, 13:00',
        }

      ]

    } -->
        <!-- <div v-if="dataList.active" class="card_active width100">
          <div class="item-blod marginB_23">
            {{ dataList.active.behavior }}
          </div>
          <div class="card_active_box">
            <div
              class="card_active_item"
              v-for="(item, index) in dataList.active.content"
              :key="index"
            >
              <image mode="scaleToFill" src="/static/images/0103o120005pr19sjA7F7_R_1600_10000.jpg">
              </image>
              <div class="card_active_item_box">
                <div class="card_active_item_name">
                  {{ item.name }}
                </div>
                <div class="card_active_item_time">
                  {{ item.time }}
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </template>
    </div>
  </li>
</template>

<style lang="scss" scoped>
$color-primary: #409eff;
$color-success: #31c48d;
$color-warning: #e6a23c;
$color-danger: #f56c6c;
$color-info: #909399;
$color-white: #fff;
$color-black: #000;

/*Hover/Active Color*/
$primary-outline-color: #d9ecff;
/*Font Color*/
$color-text-primary: #303133;
$color-text-regular: #606266;
$color-text-secondary: #909399;
$color-text-placeholder: #c0c4cc;
/*Border Color*/
$border-color-base: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;
/*Background*/
$background-color-base: #f5f7fa;
/*Box-shadow*/
$box-shadow: 0 3px 9px rgba(0, 0, 0, 0.08), 0 3px 3px rgba(0, 0, 0, 0.04);
$box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
$box-shadow-light: 0 4px 12px -8px rgba(0, 0, 0, 0.1), 0 6px 18px 0 rgba(0, 0, 0, 0.06),
  0 8px 24px 16px rgba(0, 0, 0, 0.03);
$box-shadow-lighter: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.04),
  0 12px 48px 16px rgba(0, 0, 0, 0.03);
$border-width-base: 1px;
$border-style-base: solid;
$border-color-hover: $color-text-placeholder;
$border-base: $border-width-base $border-style-base $border-color-base;
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-circle: 100%;
$border-radius-zero: 0;
$size-base: 14px;
$font-size-extra-large: 18px;
$font-size-large: 16px;
$font-size-base: 14px;
$font-size-small: 12px;
$line-small: 15rpx;
$font-weight-primary: 500;
$font-weight-secondary: 100;
$font-line-height-primary: 24px;
$font-line-height-secondary: 16px;
$font-color-disabled-base: #bbb;
$disabled-fill-base: $background-color-base;
$disabled-color-base: $color-text-placeholder;
$disabled-border-base: $border-color-light;
$height-base: 32px;
$large-height-base: 40px;
$small-height-base: 24px;

/* Timeline
	--------------------------------*/
$timeline-font-size: $font-size-base;
$timeline-node-color: $border-color-light;
$timeline-node-size: $line-small;

.ve__timeline {
  font-size: $timeline-font-size;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ve__timeline-item {
  padding-bottom: 20px;
  position: relative;
}

.ve__timeline-item:last-child {
  padding-bottom: 0;

  .ve__timeline-item__body {
    border-bottom: none;
  }
}

.ve__timeline-item__line {
  height: 100%;
  position: absolute;
  border-right-color: rgba(189, 191, 194, 0.6);
  border-right-width: 2rpx;
  left: calc(var(--size) / 2 - 1rpx);
}

.ve__timeline-item:last-child .ve__timeline-item__line {
  display: none;
}

.ve__timeline-item__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // background-color: $timeline-node-color;
  background-image: url(@/static/images/detail/dian@2x.png);
  background-size: 100%;
  border-radius: 50%;
  height: 15rpx;
  width: 15rpx;
  position: absolute;
  left: 0;
}

.ve__timeline-item__node-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // background-color: $timeline-node-color;
  background-size: 100%;
  border-radius: 50%;
  height: 40rpx;
  width: 40rpx;
  position: absolute;
  left: 0;
  background-color: #fff;
}

.icon1 {
  background-image: url(@/static/images/detail/jingdian@2x.png);
}

.icon2 {
  background-image: url(@/static/images/detail/jiudian@2x.png);
}

.icon3 {
  background-image: url(@/static/images/detail/zhuanyi@2x.png);
}

.icon4 {
  background-image: url(@/static/images/detail/huodong@2x.png);
}

.ve__timeline-item__node [class*='ve-icon-'] {
  color: #fff;
  font-size: inherit;
}

.ve__timeline-item__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.ve__timeline-item__body.luxian_bg {
  background-image: url(@/static/images/detail/bj@2x.png);
  background-size: 100%;
}

.ve__timeline-item__body.luxian_f_bg {
  background-image: url(@/static/images/detail/bj@2x.png);
  background-size: 100%;
  filter: blur(37px);
}

.ve__timeline-item__body {
  margin-left: calc($timeline-node-size + 50rpx);
  padding-bottom: 34rpx;
  position: relative;
  top: calc($timeline-node-size / 2 - 18rpx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid rgba(189, 191, 194, 0.3);

  &_left {
    &_time {
      font-size: 24rpx;
      color: #000000;
      line-height: 33rpx;
      margin-bottom: 12rpx;
    }

    &_active {
      font-weight: 600;
      font-size: 31rpx;
      color: #000000;
      line-height: 44rpx;
      margin-bottom: 2rpx;
    }

    &_path {
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.5);
      line-height: 40rpx;
    }
  }

  &_right {
    // width: 89rpx;
    padding: 0 15rpx;
    height: 48rpx;
    background: #f9f9f9;
    border-radius: 24rpx;
    font-size: 22rpx;
    color: #000000;
    line-height: 48rpx;
    text-align: center;
  }

  &_card {
    background: #ffffff;
    box-shadow: 0rpx 6rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 18rpx;
    padding: 26rpx 28rpx 28rpx;

    .card_active {
      .card_active_box::-webkit-scrollbar {
        display: none;
      }

      .card_active_box {
        display: flex;
        overflow-x: scroll;
        gap: 20rpx;
        /* 显示横向滚动条 */

        .card_active_item {
          position: relative;

          image {
            width: 319rpx;
            height: 230rpx;
            background: #f9f9f9;
            border-radius: 12rpx;
          }

          .card_active_item_box {
            position: absolute;
            bottom: 16rpx;
            width: 100%;
            box-sizing: border-box;
            padding: 0 16rpx;

            .card_active_item_name {
              font-weight: 600;
              font-size: 28rpx;
              color: #ffffff;
              line-height: 40rpx;
              margin-bottom: 4rpx;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .card_active_item_time {
              font-weight: 400;
              font-size: 20rpx;
              color: #ffffff;
              line-height: 28rpx;
            }
          }
        }
      }
    }

    .item-blod {
      font-weight: 600;
      font-size: 30rpx;
      color: #000000;
      line-height: 42rpx;
    }

    .item-blod-b {
      font-weight: 600;
      font-size: 34rpx;
      color: #000000;
      line-height: 48rpx;
    }

    .item-blod-m {
      font-family: HarmonyOS_Sans_SC_Bold;
      font-weight: 600;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
    }

    .item-suggest {
      font-weight: 300;
      font-size: 24rpx;
      color: #000000;
      line-height: 33rpx;
    }

    .item-icon {
      height: 34rpx;
      line-height: 34rpx;
      padding: 0 10rpx;
      text-align: center;
      background: rgba(96, 94, 240, 0.1);
      border-radius: 8rpx;
      font-weight: 500;
      font-size: 22rpx;
      color: #605ef0;
      margin-right: 12rpx;

      &:last-child {
        margin-right: 0;
      }
    }

    .item-image {
      display: flex;
      overflow-x: scroll;
      .item-card-image {
        margin-right: 10rpx;
        // width: 224rpx;
        flex: 0 0 224rpx;
        height: 163rpx;
        background: #d8d8d8;
        border-radius: 12rpx;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .item-jiudian-image {
      width: 182rpx;
      height: 122rpx;
      background: #d8d8d8;
      border-radius: 12rpx;
    }

    .jiudian_content {
      display: flex;
      align-items: center;

      .jiudian_content_image {
        margin-right: 10rpx;
      }
    }

    .jiudian_location {
      display: flex;
      align-items: center;

      .jiudian_weizhi {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .item-location {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.5);
      line-height: 33rpx;
    }

    .item-introduce {
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
      display: -webkit-box; /* For Safari */
      -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
      -webkit-box-orient: vertical; /* 设置盒子的子元素的排列方式 */
      overflow: hidden; /* 隐藏超出内容 */
      text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) */
      white-space: normal; /* 设置如何处理元素中的空白 */
      word-wrap: break-word;
    }
  }
}

.ve__timeline-item__content {
  color: $color-text-primary;
  font-size: inherit;
  font-family: system-ui;
  word-break: break-all;
}

.ve__timeline-item__timestamp {
  color: $color-text-secondary;
  font-size: 12px;
  line-height: 1;
}

.ve__timeline-item__timestamp.is-top {
  margin-bottom: 7px;
  padding-top: 3px;
}

.ve__timeline-item__timestamp.is-bottom {
  margin-top: 7px;
}

/*type*/
.ve__timeline-item--primary .ve__timeline-item__node {
  background-color: $color-primary;
}

.ve__timeline-item--primary .ve__timeline-item__dot {
  color: $color-primary;
}

.ve__timeline-item--success .ve__timeline-item__node {
  background-color: $color-success;
}

.ve__timeline-item--success .ve__timeline-item__dot {
  color: $color-success;
}

.ve__timeline-item--warning .ve__timeline-item__node {
  background-color: $color-warning;
}

.ve__timeline-item--warning .ve__timeline-item__dot {
  color: $color-warning;
}

.ve__timeline-item--danger .ve__timeline-item__node {
  background-color: $color-danger;
}

.ve__timeline-item--danger .ve__timeline-item__dot {
  color: $color-danger;
}

.ve__timeline-item--info .ve__timeline-item__node {
  background-color: $color-info;
}

.ve__timeline-item--info .ve__timeline-item__dot {
  color: $color-info;
}

.marginB_6 {
  margin-bottom: 6rpx;
}

.marginB_10 {
  margin-bottom: 10rpx;
}

.marginB_12 {
  margin-bottom: 12rpx;
}

.marginB_14 {
  margin-bottom: 14rpx;
}

.marginB_20 {
  margin-bottom: 20rpx;
}

.marginB_21 {
  margin-bottom: 21rpx;
}

.marginB_23 {
  margin-bottom: 23rpx;
}

.marginR_18 {
  margin-right: 18rpx;
}

.font_34 {
  font-size: 34rpx;
}

.width100 {
  width: 100%;
}
</style>
